<template>
  <div>
    <el-row>
      <el-card class="box-card" shadow="never" body-style="padding:10px;">
        <div slot="header" class="clearfix">
          <el-row :gutter="20" class="wrapperSon" style="margin-top:10px;">
            <el-col :span="3">订单总览</el-col>
            <el-col :span="21" class="wrapperSon" style="font-size: 13px;">
              <span>已排产产线:</span>
              <el-autocomplete
                class="inline-input"
                style="max-width:120px;font-size:12px;"
                v-model="queryConditions.currentProduceLineNo"
                :fetch-suggestions="querySearch"
                placeholder="产线"
                @select="handleSelect"
                @input="handleInput"
              ></el-autocomplete>
              <span>指定排产月份:</span>
              <el-select
                v-model="queryConditions.produceYear"
                placeholder="请选择年份"
                @change="handleYearChange"
              >
                <el-option
                  v-for="itm in this.lstYears"
                  :label="itm.label"
                  :value="itm.value"
                  :key="itm.value"
                >
                </el-option>
              </el-select>
              <el-select
                v-model="queryConditions.produceMonth"
                placeholder="请选择月份"
                @change="handleMonthChange"
              >
                <el-option
                  v-for="itm in this.lstMonths"
                  :label="itm.label"
                  :value="itm.value"
                  :key="itm.value"
                ></el-option>
              </el-select>
              <el-button-group>
                <el-button type="primary" icon="el-icon-search">查询</el-button>
              </el-button-group>
            </el-col>
          </el-row>
        </div>
        <div>
          <el-row :gutter="20">
            <schedulemonthdetailson
              :produceLineId="this.queryConditions.currentProduceLineId"
              :monthSel="getMonthSel"
              @changeTotalPlanAmount="changeTotalPlanAmount"
            ></schedulemonthdetailson>
          </el-row>
          <el-row :gutter="20">
            <div id="chartProduce" class="main_container"></div>
          </el-row>
        </div>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import schedulemonthdetailson from "@/views/produce/schedulePlan/statics/scheduleMonthDetailSon.vue";
import { getMonthWorkhours } from "@/api/produce/ProduceCalendarApi";
import moment from "moment";
import { getSceduledProduceLines } from "@/api/produce/schedulePlan/ProduceOrderProductPlanApi";
import path from "path";

export default {
  components: {
    Pagination,
    schedulemonthdetailson
  },
  data() {
    return {
      filterText: "",
      data2: [],
      defaultProps: {
        children: "children",
        label: "SaleOrderMst"
      },
      list: null,
      list2: null,
      listLoading: true,
      total: 0,
      total2: 0,
      listQuery: {
        page: 1,
        limit: 6,
        pageSizes: [6, 10, 14]
      },
      currentSaleOrderMstId: 0,
      dialogFormVisible: false,
      dialogStatus: "",
      textMap: {
        update: "编辑",
        create: "创建"
      },
      lstSelected: [],
      queryConditions: {
        produceYear: 0,
        produceMonth: 0,
        produceMonthStr: "",
        currentProduceLineId: 0, //当前产线
        currentProduceLineNo: "",
        currentProduceLineName: "",
        lstProcedures: [], //所有工序
        currentMontWorkHours: 0, //当前月的工作小时数
        totalPlanAmount: 0 //计划总产量
      },

      lstYears: [
        { label: "请选择", value: 0 },
        { label: "2021", value: 2021 },
        { label: "2022", value: 2022 },
        { label: "2023", value: 2023 }
      ],
      lstMonths: [
        { label: "请选择", value: 0 },
        { label: "W01-W04(一月)", value: 1 },
        { label: "W05-W08(二月)", value: 2 },
        { label: "W09-W12(三月)", value: 3 },
        { label: "W13-W16(四月)", value: 4 },
        { label: "W17-W20(五月)", value: 5 },
        { label: "W21-W24(六月)", value: 6 },
        { label: "W25-W28(七月)", value: 7 },
        { label: "W29-W32(八月)", value: 8 },
        { label: "W33-W36(九月)", value: 9 },
        { label: "W37-W40(十月)", value: 10 },
        { label: "W41-W44(十一月)", value: 11 },
        { label: "W45-W48(十二月)", value: 12 }
      ],
      ddBottleneckProcedure: [], //瓶颈工序
      resourceSetDlgVisible: false, //资源配置对话框
      lstOrders: [],
      lstProduceLines: []
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree2.filter(val);
    }
  },
  computed: {
    //获取工序按钮颜色，0-30 为浅蓝色;50-80为绿色;80-110为浅红色;110以上为红色
    getBadgeButtonColor() {
      return function(factor, itm) {
        if (itm != null) {
          let s = new String(itm.usedDeviceLoadFactor);
          s = s.substring(0, s.length - 1);
          let f = parseInt(s);
          if (s > 0 && s < 30) {
            return "primary";
          } else if (s >= 30 && s < 70) {
            return "success";
          } else if (s >= 80 && s < 110) {
            return "warning";
          } else if (s >= 110) {
            return "danger";
          } else {
            return "info";
          }
        }
        return "info";
      };
    },
    getMonthSel() {
      let month = parseInt(this.queryConditions.produceMonth);
      if (month <= 0) {
        return moment(new Date()).format("YYYY-MM-DD");
      }
      if (month < 10) {
        return (
          this.queryConditions.produceYear +
          "-0" +
          this.queryConditions.produceMonth +
          "-01"
        );
      } else {
        return (
          this.queryConditions.produceYear +
          "-" +
          this.queryConditions.produceMonth +
          "-01"
        );
      }
    }
  },
  created() {
    this.getSceduledLines();
  },
  mounted() {
    //默认选择为当前年份和当前月
    this.queryConditions.produceYear = 2022; //for test moment().year();
    this.queryConditions.produceMonth = 1; // for test moment().month();

    let itm = this.lstMonths.find(v => v.value == moment().month());
    if (itm != null) {
      this.queryConditions.produceMonthStr = itm.label;
    }
    //获取当前月的工作时长以计算负荷率
    if (
      this.queryConditions.produceYear != 0 &&
      this.queryConditions.produceMonth != 0
    ) {
      this.getMonthWorkhours();
    }
  },
  methods: {
    /**
     * 子组件关闭时通知父组件
     */
    hideProduceLineDlg(e) {
      this.dialogProduceLineVisible = e;
    },
    //切换产线
    changeProduceLine() {
      this.dialogProduceLineVisible = true;
    },
    fetchData() {},
    hideResourceDlg() {
      this.resourceSetDlgVisible = false;
    },
    refreshProduceLine(val) {
      this.queryConditions.currentProduceLineId = val.produceLineId;
      this.queryConditions.currentProduceLineNo = val.produceLineNo;
      this.queryConditions.currentProduceLineName = val.produceLineName;
      this.fetchData();
    },
    handleYearChange(val) {
      this.queryConditions.produceYear = val;
      this.queryConditions.produceYearStr = val;
      if (val != 0) {
        this.getMonthWorkhours();
      }
    },
    handleMonthChange(val) {
      this.queryConditions.produceMonth = val;
      let itm = this.lstMonths.find(v => v.value == val);
      if (itm != null) {
        this.queryConditions.produceMonthStr = itm.label;
      }
      if (val != 0) {
        this.getMonthWorkhours();
      }
    },
    getMonthWorkhours() {
      /**1007 为标准公祖日历的Id 为了测试暂且硬编码*/
      let currentDate =
        this.queryConditions.produceYear +
        "-" +
        this.queryConditions.produceMonth +
        "-01";
      let params = { id: 1008, date: currentDate };
      getMonthWorkhours(params).then(response => {
        this.queryConditions.currentMontWorkHours = response.data;
      });
    },
    changeTotalPlanAmount(val) {
      this.queryConditions.totalPlanAmount = val;
    },
    querySearch(queryString, cb) {
      let results = this.lstOrders;
      results = queryString
        ? this.lstOrders.filter(this.createFilter(queryString))
        : this.lstOrders;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return p => {
        return p.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
      };
    },
    handleSelect(val) {
      let itm = this.lstProduceLines.find(v => v.produceLineNo == val.value);
      if (itm != null) {
        this.queryConditions.currentProduceLineId = itm.produceLineId;
      } else {
        this.queryConditions.currentProduceLineId = 0;
      }
    },
    handleInput(val) {
      if (val == null || val.length == 0) {
        this.queryConditions.currentProduceLineId = 0;
      }
    },
    //获取所有的正序未排产的产线
    getSceduledLines() {
      this.listLoading = true;
      let params = { produceLineNo: "" };
      params = Object.assign(params, this.queryConditions);
      getSceduledProduceLines(params).then(response => {
        this.lstProduceLines.length = 0;
        let result = response.data;
        if (result != null && result.length > 0) {
          this.lstProduceLines = result;
          this.lstOrders.length = 0;
          result.map(v => {
            this.lstOrders.push({ value: v.produceLineNo });
          });
        }
        this.listLoading = false;
      });
    },
   
  }
};
</script>
<style scoped>
.wrapperSon {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.el-badge__content .is-fixed {
  background-color: darkgreen;
}
.main_container {
  width: 100%;
  height: 200px;
  overflow: hidden;
}
</style>
